<template>
  <main class="main">
    <div>
      <el-button type="success" round @click="playVoice">播放语音</el-button>
      <el-button type="success" round @click="stopVoice">暂停语音</el-button>
    </div>
  </main>
</template>

<script setup>
import { ref } from "vue";

// 输入框的值
const input = ref(
  "12312我的撒旦撒12222222222222222222233333333333333333333123111111111111111123432222222224234234"
);
// 语速选择 0.1-10
const value1 = ref(1);
// 音量选择 0-1
const value2 = ref(0.5);
// 声音的状态 true就是播放，false就是暂停
const voiedStatus = ref(false);

// 得到用户输入的值并赋值
const getUserInput = (val) => {
  input.value = val;
};
// 语速选择
const speakSpeedChoose = (val) => {
  value1.value = val;
};
// 音量选择
const voiceChoose = (val) => {
  value2.value = val;
};
// 播放方法
const play = (status) => {
  // 判空
  if (!input.value) return;
  // 创建实例，并传入输入的文字
  let readTxt = new SpeechSynthesisUtterance(input.value);
  readTxt.volume = 10; // 音量
  readTxt.rate = 10; // 语速
  speechSynthesis.speak(readTxt); // 调用说的方法
  if (status) {
    speechSynthesis.resume(); // 恢复播放
  } else if (status === false) {
    speechSynthesis.pause(); // 暂停播放
  }
  // 语言结束的回调
  readTxt.addEventListener("end", function () {
    window.speechSynthesis.cancel(); // 删除队列中全部的语音
  });
};
// 点击播放
const playVoice = () => {
  voiedStatus.value = true;
  play(true);
};
// 点击暂停
const stopVoice = () => {
  voiedStatus.value = false;
  play(false);
};
</script>
